import React from "react";
import axios from "axios";

export default function Axios() {
    //声明状态
    const [duanzi, setDuanzi] = React.useState([]);

    //声明函数
    const getDuanzi = async () => {
        //获取段子数据
        let result = await axios.get('http://api.xiaohigh.com/duanzi');
        //保存段子数据
        setDuanzi(result.data);
    }

    //模拟生命周期
    React.useEffect(() => {
        getDuanzi();
    }, []);

    return (
        <div>
            <button onClick={getDuanzi}>获取段子</button>
            <ul>
                {
                    duanzi.map(item => {
                        return <li key={item.id}>{item.text}</li>
                    })
                }
            </ul>
        </div>
    );
}
